import * as React from "../../../script/frame/apiModel/gui/React";
import {IProps, SyncId, UISyncData, View} from "../../../script/frame/apiModel/gui/React";
import {GuiKeys} from "../../../script/controller/model/ControllerOpt";
import Configer from "../../../script/frame/apiModel/config/Configer";
import {ChooseArchiveBarInterface} from "../../interface/GuiInterface";
import {ResourceKey} from "../../../script/constant/ResourceConstant";
import {UnitJson} from "../../../script/frame/apiModel/model/StoreJson";
import {ConfigKey} from "../../../script/constant/ConfigConstant";
import {CodeUtil} from "../../../script/frame/codeAdapter/CodeUtil";
import {DataRouter} from "../../../script/frame/dataSource/DataRouter";
import {DataRouterUtil} from "../../../script/utils/router/DataRouterUtil";
import {ColorStr} from "../../../script/type/Type";
import {TextAlign} from "../../../script/frame/apiModel/adapter/adapterInterface/model1/IFrameAdapter";
import {publicGui} from "../../interface/PublicGui";
import {LightButton} from "../component/LightButton";


export interface IProp {
}
export interface IState {
    visible: boolean;
    unitJsons: UnitJson[];
}



export default class ChooseArchiveBar extends ChooseArchiveBarInterface<IProp, IState> {
    constructor(props: IProps & IProp) {
        super(props);
        this.state = {
            visible: false,
            unitJsons: [],
        }
    }

    render = () => {
        // if (this.state.diff && this.state.diff >= 0) {
        //     this.state.visible = false;
        // }
        const backSize = { w: 1, h: 1 };

        const disableBlp = Configer.getResource(ResourceKey.disableBlp)

        const modeBack = Configer.getResource(ResourceKey.chooseArchiveBoard)
        const redCloseButton = Configer.getResource(ResourceKey.redCloseButton);
        const itemBack = Configer.getResource(ResourceKey.chooseArchiveItem)

        const units: UnitJson[] = [];
        const maxArchiveNum = Configer.getConfig(ConfigKey.maxArchiveNum);
        for (let i = 0; i < maxArchiveNum; i++) {
            const json = this.state.unitJsons[i];
            if (json) {
                units.push(json)
            } else {
                units.push({ id: '' })
            }
        }

        const iconSize = { w: 0.02, h: 0.03 };
        const buttonSize = { w: 0.01, h: 0.02 };
        const modeSize = { w: 0.18, h: 0.24 };

        return <View   key={GuiKeys.chooseArchiveBar} style={{ hidden: !this.state.visible, backgroundImage: disableBlp, width: backSize.w, height: backSize.h, left: 0, top: 0 }}>
            <View key={GuiKeys.chooseArchiveBarBoard} style={{ backgroundImage: modeBack, width: modeSize.w, height: modeSize.h, marginL: 0.41, marginT: 0.31, paddingT: 0.03 }}>
                {
                    units.map((unitJson, index) => {
                        const id = unitJson.id;
                        let icon = '';
                        let str = '新的存档';
                        let canDelete = false
                        if (!CodeUtil.isNullOrZero(id)) {
                            const unitData = DataRouter.getUnitDataByUnitId(id);
                            icon = DataRouterUtil.getIconUrlByIconData(unitData);
                            const name = unitData?.Name ? unitData.Name : '未知角色';
                            const lv = DataRouterUtil.getLvByExp(unitJson.e);
                            str = `${name} Lv:${lv}`;
                            canDelete = true;
                        }

                        const targetIndex = index + 1
                        return <View key={`${GuiKeys.chooseArchiveBarItem}|${index}`} style={{ width: modeSize.w, height: iconSize.h, marginT: 0.03 }}>
                            <View key={`${GuiKeys.chooseArchiveBarIcon}|${index}`} style={{ backgroundImage: icon, width: iconSize.w, height: iconSize.h, marginL: 0.01 }}></View>
                            <LightButton key={`${GuiKeys.chooseArchiveBarText}|${index}`}  onMouseDown={() => { return this.chooseArchive(targetIndex) }}  style={{ backgroundImage: itemBack, width: 0.12, height: iconSize.h, color: ColorStr.black, fontAlign: TextAlign.center, marginL: 0.005, paddingT: 0.005 }}>{str}</LightButton>
                            <LightButton key={`${GuiKeys.chooseArchiveBarButton}|${index}`} onMouseDown={() => { return this.loseArchive(targetIndex) }} style={{ hidden: !canDelete, backgroundImage: redCloseButton, width: buttonSize.w, height: buttonSize.h, marginL: 0.005 }}></LightButton>
                        </View>
                        // return <View key={GuiKeys.chooseArchiveBarItem} onMouseDown={() => { return this.chooseArchive(index) }} style={{ width: backSize.w, height: 0.2 }}>新的存档</View>
                    })
                }
            </View>
        </View>
    }

    loseArchive = (index: number) => {
        const fun = () => {
            const syncData: UISyncData = { id: SyncId.loseArchive, param: { archiveIndex: index } };
            return syncData;
        }
        publicGui.showDialogPage(0.11, ' ', undefined, ResourceKey.dialogDeleteArchiveBoard, ResourceKey.dialogDeleteArchiveOk, ResourceKey.dialogDeleteArchiveCanel, fun, undefined);
    }

    chooseArchive = (index: number) => {
        this.setState({
            ...this.state,
            visible: false,
        })
        const syncData: UISyncData = { id: SyncId.chooseArchive, param: { archiveIndex: index } };
        return syncData;
    }

    openBar = (unitJsons: UnitJson[]) => {
        this.setState({
            ...this.state,
            visible: true,
            unitJsons,
        })
    }

    closeBar = () => {
        this.setState({
            ...this.state,
            visible: false,
        })
    }

    getVisible = () => {
        return this.state.visible;
    }
}